<template>
  <section>
    <el-form label-width="100px">
      <el-form-item  v-for="d in item.data.vals" :key="d.code" :label="d.title">
        <div v-if="d.code !== 'method'">
          <el-input size="mini" v-model="d.val"></el-input>
        </div>
        <div v-if="d.code === 'method'">
          <el-collapse>
            <el-collapse-item :title="m.name" :name="m.name" v-for="m in d.val" :key="m.code">
              <el-button size="mini" @click="addMethod(m)">新添{{m.label[0].name}}</el-button>
              <el-table :data="m.detail" >
                <!--:span-method="m.code ==='out'?objectSpanMethod:null"-->
                <el-table-column type="index" label="序号">
                </el-table-column>
                <el-table-column :label="i.name" v-for="(i,index) in m.label" :key="index" >
                  <template slot-scope="scope">
                    <div v-if="m.code === 'in'">
                      <el-input size="mini" v-model="scope.row[i.name]"></el-input>
                    </div>
                    <div v-else>
                      <div v-if="i.name === '项目'">
                        <el-input size="mini" v-model="scope.row[i.name]"></el-input>
                      </div>
                      <div v-else>
                        <div v-for="(v,vi) in scope.row[i.name]" :key="vi">
                          <el-input size="mini" v-model="scope.row[i.name][vi]"></el-input>
                          <!--{{v}}-->
                        </div>
                        <i class="el-icon-plus" @click="addV(scope.row,i.name)" ></i>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-form-item>
    </el-form>
    <el-row>
      <div>
        <el-button size="mini" type="primary" @click="savePage(item)"  v-if="item.state === 0">测试·保存</el-button>
        <el-button type="danger" size="mini" @click="delPage">删除</el-button>
        <el-button type="success" size="mini" @click="finishePage" style="float: right;margin-right: 0px"  v-if="item.state === 0">完成</el-button>
      </div>
      <div v-if="item.state === 1">
          <span style="color: red;font-weight: bold">
          报告项已创建完毕
          </span>
      </div>
    </el-row>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "No7",
    props: ['item'],
    data() {
      return {
        method:[
          {name:'内服',code:'in',detail:[],label:[
              {name:'处方',code:''},
              {name:'周期',code:''},
              {name:'用法',code:''},
              {name:'频率',code:''},
              {name:'剂量',code:''},
            ]},
          {name:'外治',code:'out',detail:[],label:[
              {name:'项目',code:''},
              {name:'穴位',code:''},
              {name:'手法',code:''},
              {name:'时间',code:''},
              {name:'频率',code:''}]},
        ],
      }
    },
    created(){
      console.log(this.item)
      if(this.item.data.vals){
        console.log('有val')
      }else {
        Vue.set(this.item.data,'vals',this.item.reportModule.metadata.detail)
        this.item.data.vals.forEach(v=>{
          if(v.code === 'method') Vue.set(v,'val',this.method)
        })
      }
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      addV(row,key){
        console.log(row,key)
        if(row[key] === undefined){
          Vue.set(row,key,[''])
        }else {
          row[key].push('')
        }
      },
      savePage(){
        console.log(this.item)
        this.$emit('save')
      },
      delPage(){
        this.$emit('del')
      },
      finishePage(){
        this.$emit('finish')
      },
      addMethod(m){
        console.log(m)
        m.detail.push({})
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 1) {
          if (rowIndex % 5 === 0) {
            return {
              rowspan: 5,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  }
</script>

<style scoped>
  .ground-route-table,
  .ground-route-table-samll {
    width: 100%;
    border: 1px solid #dfe6ec;
    border-collapse: collapse;
  }
  .ground-route-table td{
    border: 1px solid #dfe6ec;
  }
</style>
